<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>

    <div id="app">
        <button @click="send">发送异步请求</button>
        <br>

        <span style="color:red;" v-html="msg"></span>
    </div>

</body>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:""
        },
        methods:{
            send(){

                //打开cookie携带开关
                axios.defaults.withCredentials = true;

                axios({
                    url:"http://localhost:81/user",
                    method: "get",

                    headers:{
                        //Bearer token的规范是：Authorization名称的头，值为Bearer空格+具体的jwt串
                        "Authorization":"Bearer " + localStorage.getItem("token")
                    }
                }).then(resp=>{
                        //判断是否有刷新的token
                        let refreshToken = resp.headers.refresh_token;
                        if (refreshToken!=null&&refreshToken.length!=0){
                            localStorage.setItem("token",refreshToken)
                        }
                        let res = resp.data;
                        if (res.code == 2000){
                            //没有登录  -- 跳转到登录页面
                            location.href = "/login.html"
                        }else if(res.code == 3000){
                            //没有权限
                            alert(res.msg)
                        }else if(res.code == 1000){
                            //访问数据成功
                            this.msg = res;
                        }
                    })
                ;
            }
        }
    });

</script>
</html>